import ReactDOM from 'react-dom'
// react-redux提供context生产者，
// 我们必须使用生产者把它的value也就是下面的storej里的store对象嵌入到所有的子组件里，
// 子组件才能通过react - redux提供的connect方法来注入store中的state到组件里去
import { Provider } from 'react-redux'
// redux-persist提供的context生产者
// 这里使用persistGate这个生产者，把store中经过持久化后的store对象注入到组件里
import { PersistGate } from 'redux-persist/lib/integration/react'
import { persistStore } from 'redux-persist'

import Router from './routes'

// store对象和被持久化完成的store对象
import store from './modules/store'

// 根据当前屏幕宽度初始化html根字体大小的插件，如果屏幕宽度为100，根字体大小就是10；如果宽度350，根字体大小就是35
import 'lib-flexible'
import '@/assets/less/base.less'

ReactDOM.render(
  // react-redux的生产者 value是store
  <Provider store={store}>
    {/* redux数据持久化的生产者，value是persistor */}
    <PersistGate loading={null} persistor={persistStore(store)}>
      {/* 路由组件 */}
      <Router />
    </PersistGate>
  </Provider>,
  document.getElementById('root')
)
